<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view>
		<view class="text-area" style="padding: 20rpx 0;">
			<text class="title">当前主题：{{ theme }}</text>
		</view>
		<view class="mock-btn">
			<navigator url="/pages/test/comp">登录测试</navigator>
		</view>
		<view class="mock-btn">
			<navigator url="/pages/test/eSign">e签宝</navigator>
		</view>

		<!-- #ifdef H5 -->
		<view class="paragraph"><text style="font-weight: bold;">（PC-Web 端可使用 Edge 浏览器修改设置中的外观查看效果）</text></view>
		<!-- #endif -->

	</view>
</template>

<script lang="ts">
	export default {
		data() {
			return {
				title: '暗黑模式',
				theme: uni.getSystemInfoSync().theme,
			};
		},
		onLoad() {
			uni.onThemeChange(({
				theme
			}) => {
				console.log('onThemeChange', theme);
				this.theme = theme;
			});
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 50rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.mock-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(0, 0, 0, 0.9);
		border: 1px solid #e5e5e5;
		background-color: #f7f7f7;
		border-radius: 5px;
		padding: 20rpx;
	}

	.paragraph {
		padding: 20rpx 40rpx 0;
	}

	@media (prefers-color-scheme: dark) {
		.mock-btn {
			color: hsla(0, 0%, 100%, 0.8);
			background-color: #1f1f1f;
			border-color: #373737;
		}
	}
</style>
